<template>
    <div class="upload-detail">
        <div class="detail-info">           
            <div class="upload-form">
                <p class="title">
                    <span>{{informationInfo.title}}</span>
                </p>                 
                <div class="form">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="资源类型" prop="sourType">
                            <label>{{informationInfo.sourType}}</label>
                        </el-form-item>                        
                        <el-form-item label="资源名称" prop="name">
                            <el-input placeholder="请输入资源名称" v-model="ruleForm.name"></el-input>
                        </el-form-item>

                        <!-- 不同场景 -->
                        <!-- <el-form-item label="资源封面" prop="cover">
                            <el-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" v-model="ruleForm.checkPic" alt="">
                            </el-dialog>                            
                        </el-form-item> -->
                        <el-form-item label="资源文件" prop="sourFile">
                            <el-upload
                                class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                list-type="picture">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>                            
                        </el-form-item>
                        <!-- <el-form-item label="资源文件(ppt)" prop="sourFile">
                            <el-upload
                                class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                list-type="text">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传PPT,PPTX文件，且不超过500kb</div>
                            </el-upload>                            
                        </el-form-item>    
                        <el-form-item label="URL" prop="url">
                            <el-input placeholder="请输入资源名称" type='url' v-model="ruleForm.url"></el-input>
                        </el-form-item>  -->
                        <!-- 不同场景 -->

                        <el-form-item label="所属行业" prop="sourIndustry">
                          <el-select v-model="ruleForm.sourIndustry" clearable placeholder="请选择所属行业">
                            <el-option
                                v-for="item in datas.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                          </el-select>                          
                        </el-form-item>
                        <el-form-item label="解决方案" prop="sourSolution">
                            <el-select v-model="ruleForm.sourSolution" placeholder="请选择解决方案">
                                <el-option
                                    v-for="item in datas.solutionOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="关键词" prop="keyword">
                            <el-tag
                                :key="tag"
                                v-for="tag in keywordTags"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(tag)">
                                {{tag}}
                            </el-tag>                            
                            <el-input
                                placeholder="请输入关键字并回车(Enter)"
                                class="input-new-tag"
                                v-model="inputValue"
                                ref="saveTagInput"
                                @keyup.enter.native="handleInputConfirm"
                                @blur="handleInputConfirm">
                            </el-input>                            
                        </el-form-item>   
                        <el-form-item label="资源描述" prop="desc">
                          <el-input type="textarea" placeholder="请输入资源描述" v-model="ruleForm.desc"></el-input>
                        </el-form-item>
                        <el-form-item style="margin-left:43%; margin-top: 50px; margin-bottom: 50px;">
                          <el-button type="primary" @click="submitForm('ruleForm')">上传</el-button>
                          <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                      </el-form>                    
                </div>
            </div>            
        </div>
    </div>
</template>
<script>
	import getToplistsData from '@/api/getToplistsData'
	import Loading from '@/components/Loading'
	export default {
		components:{
			Loading
		},        
		data(){
            var validatePic = (rule, value, callback) => {
                if (this.dialogImageUrl === '') {
                    callback(new Error('请上传文件封面!'));
                } else {
                    callback();
                }
            }              
			return {
                datas:{
                    options: [{
                    value: '互联网',
                    label: '互联网'
                    }, {
                    value: '金融',
                    label: '金融'
                    }, {
                    value: '5G分屏',
                    label: '5G分屏'
                    }, {
                    value: '信息化分屏',
                    label: '信息化分屏'
                    }, 
                    {
                        value: '宣传',
                        label: '宣传'
                    },
                    {
                        value: '惠民应用',
                        label: '惠民应用'
                    },
                    {
                        value: '旋转屏',
                        label: '旋转屏'
                    },
                    {
                        value: '信息化',
                        label: '信息化'
                    },
                    {
                        value: '智慧家庭',
                        label: '智慧家庭'
                    },
                    {
                        value: '核心能力分屏',
                        label: '核心能力分屏'
                    },
                    {
                        value: '物联网',
                        label: '物联网'
                    }                   
                ],
                    solutionOptions:[
                    {
                        value: '顶设咨询服务',
                        label: '顶设咨询服务'
                    },
                    {
                        value: '公司核心平台类产品(One平台)',
                        label: '公司核心平台类产品(One平台)'
                    },
                    {
                        value: '行业应用产品',
                        label: '行业应用产品'
                    },
                    {
                        value: '落地项目/案例',
                        label: '落地项目/案例'
                    },
                    {
                        value: '其他',
                        label: '其他'
                    }                      
                ],
                    value: ''                                     
                },
                fileList:[],
                keywordTags: ['智慧城市', '互联网', '云服务'],
                inputValue:'',
                dialogImageUrl: '',
                dialogVisible: false,                
				informationInfo:{
                    title:'资源上传',
                    sourType:''
                },
                ruleForm: {
                    sourIndustry:'',
                    sourFile:'',
                    cover:'',
                    name: '',
                    sourSolution:'',
                    desc: '',
                    keyword:'',
                    checkPic:'',
                    url:''
                },   
                rules: {
                    name: [
                        { required: true, message: '请输入资源名称', trigger: 'blur' },
                    ],
                    sourIndustry:[
                        { required: true, message: '请选择所属行业', trigger: 'change' }
                    ],
                    sourSolution:[
                        { required: true, message: '请选择解决方案', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写资源描述', trigger: 'blur' }
                    ],
                    checkPic:[
                        { validator: validatePic, message: '请上传文件封面', trigger: 'blur' }
                    ],
                    url: [
                        { required: true, message: '请输入URL', trigger: 'blur' },
                    ]
                }                             
			}
		},
		created(){
			this._getToplistsData();
            this.getType();
		},
        watch:{
            $route:{
                handler(newRouter){
                    if(newRouter){
                        this.getType();
                    }
                },
                immediate: true
            }
        },      
		methods:{
			_getToplistsData(){
				getToplistsData().then((res)=>{
					this.toplists=res.data.topList
				})
			},
			goTo(place,id){
				let url=`/${place}/${id}`
				this.$router.push(url)
			},
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //上传文件
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            //键入关键词
            handleClose(tag) {
                this.keywordTags.splice(this.keywordTags.indexOf(tag), 1);
            },            
            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                this.keywordTags.push(inputValue);
                }
                this.inputValue = '';
            },
            //封面
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },   
            getType(){
                if(this.$route.query.type){
                    let types = this.$route.query.type;
                    switch (types) {
                        case 'picture':
                            this.informationInfo.sourType = '图片';
                            break;
                            case 'video':
                            this.informationInfo.sourType = '视频';
                            break;
                            case 'ppt':
                            this.informationInfo.sourType = 'PPT';                        
                            break;
                            case 'vr':
                            this.informationInfo.sourType = 'VR';                           
                            break;  
                            case 'ar':
                            this.informationInfo.sourType = 'AR';                           
                            break;   
                            case 'system':
                            this.informationInfo.sourType = '行业可视化系统';                           
                            break;                                                                                                           
                        default:
                            this.informationInfo.sourType = '图片';
                            break;
                    }
                }
            }                                
		}
	}
</script>
<style scoped>
    .upload-detail{
        width: 80%;
        background: #f7f7f7;
        margin: 0 auto;
        min-height: 834px;
    }
    .title{
        margin: 20px 0 40px 0;
        font-size: 24px;
        font-weight: 700;
        color: #615f5f;
        text-align:center;
    }
    .demo-ruleForm{
        width: 64%;
    }
    .detail-info{
        width: 60%;
        margin: 60px auto;
        overflow: hidden;
    }
    .images{
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
		transform: scale(0.9);
		-ms-transform:scale(0.9);     /* IE 9 */
		-moz-transform:scale(0.9);     /* Firefox */
		-webkit-transform:scale(0.9); /* Safari 和 Chrome */
		-o-transform:scale(0.9);	
    }
    .information{
        margin: 70px auto;
        background: #fff;
        width: 95%;
        padding: 25px;
    }
    .upload-form{
        color: #9b9b9b;
        font-size: 15px;   
        margin: 40px auto;
        background: #fff;
        width: 95%;
        padding: 1px 15px;         
    }      
    .el-tag {
        margin: 5px 5px 5px 0;
    }

</style>
